<template>
  <div class="ringPage2">
    <!-- 顶部下拉菜单 -->
    <van-dropdown-menu>
      <van-dropdown-item v-model="value1" :options="option1" size=".22rem" />
      <van-dropdown-item v-model="value2" :options="option2" size=".22rem" />
      <van-dropdown-item v-model="value3" :options="option3" size=".22rem" />
    </van-dropdown-menu>
    <main>
      <div class="ring_boxb">
        <img src="@/assets/imgs/user_colin/erweima.jpg" alt="" />
        <div class="font">
          <p>DR钻戒</p>
          <p>中原区</p>
          <p>100%好评</p>
          <p>15000起</p>
        </div>
      </div>
      <div class="ring_boxb">
        <img src="@/assets/imgs/user_colin/erweima.jpg" alt="" />
        <div class="font">
          <p>DR钻戒</p>
          <p>中原区</p>
          <p>100%好评</p>
          <p>15000起</p>
        </div>
      </div>
      <div class="ring_boxb">
        <img src="@/assets/imgs/user_colin/erweima.jpg" alt="" />
        <div class="font">
          <p>DR钻戒</p>
          <p>中原区</p>
          <p>100%好评</p>
          <p>15000起</p>
        </div>
      </div>
      <div class="ring_boxb">
        <img src="@/assets/imgs/user_colin/erweima.jpg" alt="" />
        <div class="font">
          <p>DR钻戒</p>
          <p>中原区</p>
          <p>100%好评</p>
          <p>15000起</p>
        </div>
      </div>
      <div class="ring_boxb">
        <img src="@/assets/imgs/user_colin/erweima.jpg" alt="" />
        <div class="font">
          <p>DR钻戒</p>
          <p>中原区</p>
          <p>100%好评</p>
          <p>15000起</p>
        </div>
      </div>
      <div class="ring_boxb">
        <img src="@/assets/imgs/user_colin/erweima.jpg" alt="" />
        <div class="font">
          <p>DR钻戒</p>
          <p>中原区</p>
          <p>100%好评</p>
          <p>15000起</p>
        </div>
      </div>
      <div class="ring_boxb">
        <img src="@/assets/imgs/user_colin/erweima.jpg" alt="" />
        <div class="font">
          <p>DR钻戒</p>
          <p>中原区</p>
          <p>100%好评</p>
          <p>15000起</p>
        </div>
      </div>
    </main>
  </div>
</template>
<script>
import { ref } from "vue";
export default {
  setup() {
    const value1 = ref(0);
    const value2 = ref("a");
    const value3 = ref("1");
    const option1 = [
      { text: "全部地区", value: 0 },
      { text: "市辖区", value: 1 },
      { text: "中原区", value: 2 },
      { text: "二七区", value: 3 },
      { text: "管城回族区", value: 4 },
      { text: "金水区", value: 5 },
      { text: "上街区", value: 6 },
      { text: "惠济区", value: 7 },
      { text: "荥阳市", value: 8 },
      { text: "新郑市", value: 9 },
      { text: "中牟县", value: 10 },
    ];
    const option2 = [
      { text: "排序", value: "a" },
      { text: "默认排序", value: "b" },
      { text: "价格从低到高", value: "c" },
      { text: "价格从高到底", value: "d" },
      { text: "热度从高到低", value: "e" },
      { text: "销量从高到低", value: "f" },
      { text: "距离从低到远", value: "g" },
    ];
    const option3 = [{ text: "筛选", value: "1" }];
    return {
      value1,
      value2,
      value3,
      option1,
      option2,
      option3,
    };
  },
};
</script>
<style lang="scss" socped>
* {
  margin: 0;
  padding: 0;
}
html,
body {
  font-size: 13.33333vw;
}
.ringPage2 {
  position: relative;
}
//筛选地区吸顶效果， 因为sticky为css3新增  兼容性不好会抖动
.van-dropdown-menu {
  position: sticky;
  top: 1.75rem;
}
.van-ellipsis {
  font-size: 0.22rem;
  font-weight: 400;
  // color: #999999;
}
.van-cell__title {
  font-size: 0.22rem;
  font-weight: 400;
}
.ring_boxb {
  width: 100%;
  height: 1.8rem;
  padding-top: 0.6rem;
  padding-bottom: 0.2rem;
  border-bottom: 1px solid #f3f3f3;
  img {
    float: left;
    width: 1.8rem;
    margin-left: 0.56rem;
  }
  .font {
    float: left;
    margin-left: 0.45rem;
    p {
      font-size: 0.22rem;
      font-weight: 400;
      margin: 0.1rem 0;
    }
    p:first-child {
      font-size: 0.28rem;
      color: #333333;
    }
    p:nth-child(2) {
      color: #999999;
    }
    p:nth-child(3) {
      color: #d84141;
    }
    p:last-child {
      color: #999999;
    }
  }
}
.ring_boxb:first-child {
  padding-top: 0.2rem;
}
</style>
